---
title: Comércio Eletrônico
description: Uma introdução sobre adicionar opções de comércio eletrônico em seu site Astro
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';

Com Astro, você pode construir diversas opções de comércio eletrônico, desde links de _checkout_ até próprias páginas de pagamento para operar completamente uma loja usando a API do serviço de pagamento.

## Sobreposições de processamento de pagamento

Alguns serviços de processamento de pagamento (como [Lemon Squeezy](#lemon-squeezy) e [Paddle](#paddle)) adicionam um formulário de pagamento para permitir que seu cliente compre do seu site. Essas sobreposições podem ser hospedadas ou embutidas em uma página do seu site. Elas podem oferecer algumas personalizações básicas ou introduzir a marca do site, e podem ser adicionadas em seu projeto Astro como scripts, botões ou links externos.

### Lemon Squeezy

[Lemon Squeezy](https://www.lemonsqueezy.com/) é uma plataforma "tudo em um" para assinaturas e pagamentos com suporte a múltiplas moedas, conformidade com taxas globais, integração com PayPal e mais. Ela permite que você crie e gerencie produtos e serviços digitais através do painel da sua conta, e fornece URLs de produto para o processo de _checkout_.

A [biblioteca JavaScript Lemon.js JavaScript](https://docs.lemonsqueezy.com/help/lemonjs/what-is-lemonjs) básica permite que você venda seus produtos Lemon Squeezy com um link de _checkout_.

#### Uso Básico

Um exemplo a seguir sobre como adicionar o elemento Lemon Squeezy "Compre agora" na sua página Astro. Clicando nesse link um _checkout_ será aberto para permitir que o visitante complete uma compra individual.

<Steps>
1. Adicione a seguinte tag `<script>` no `head` ou `body` da sua página:

    ```html title="src/pages/my-product-page.astro"
    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
    ```

2. Crie uma âncora na página ligando-a à sua URL de produto. Inclua a classe `lemonsqueezy-button` para abrir uma camada de _checkout_ quando clicado.

    ```html title="src/pages/my-product-page.astro"
    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
      Compre agora
    </a>
    ```
</Steps>

#### Lemon.js

Lemon.js também fornece comportamentos adicionais como [abrir sobreposições de maneira programática](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays) e [manipular eventos de sobreposição](https://docs.lemonsqueezy.com/help/lemonjs/handling-events).

<ReadMore> Leia o [guia inicial do desenvolvedor Lemon Squeezy](https://docs.lemonsqueezy.com/guides/developer-guide) para mais informações.</ReadMore>

### Paddle

[Paddle](https://www.paddle.com/) é uma solução de cobrança para produtos e serviços digitais. Ele lida com pagamentos e taxas, e gerencia assinaturas através de uma sobreposição ou um _checkout_ embutido.

[Paddle.js](https://developer.paddle.com/paddlejs/overview) é uma biblioteca JavaScript leve que permite que você construa experiências de cobranças ricas e integradas usando Paddle.

#### Uso Básico

Um exemplo a seguir sobre como adicionar um elemento Paddle "Comprar Agora" em uma página Astro. Clicando nesse link um checkout será aberto para permitir que o visitante complete uma compra individual.

Depois de o link de pagamento padrão do domínio (seu próprio website) for aprovado por Paddle, você pode transformar qualquer elemento da sua página em uma sobreposição de _checkout_ usando atributos de dados HTML.

<Steps>
1. Adicione as duas tags `<script>` seguintes no `head` ou `body` da sua página:

    ```html title="src/pages/my-product-page.astro"
    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
    <script type="text/javascript">
      Paddle.Setup({ 
        token: '7d279f61a3499fed520f7cd8c08' // substitua com um token do lado do cliente
      });
    </script>
    ```

2. Transforme qualquer elemento em sua página em um botão de Checkout Paddle ao adicionar a classe `paddle_button`:

    ```html title="src/pages/my-product-page.astro"
    <a href="#" class="paddle_button">Compre Agora</a>
    ```

3. Adicione um atributo `data-items` para especificar o `priceId` e `quantity` do seu produto Paddle. Você pode também opcionalmente passar can also optionally pass additional [atributos de dados HTML](https://developer.paddle.com/paddlejs/html-data-attributes) para preencher dados, lidar com sucesso no _checkout_, ou estilizar seu botão e a sobreposição _checkout_:
    ```html title="src/pages/my-product-page.astro"
    <a 
      href="#"
      class="paddle_button"
      data-display-mode="overlay"
      data-theme="light"
      data-locale="en"
      data-success-url="https://example.com/thankyou"
      data-items='[
        {
          "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
          "quantity": 1
        }
      ]'
    >
      Compre agora
    </a>
    ```
</Steps>

#### Paddle.js

Em vez de passar atributos de dados HTML, você pode enviar dados para a sobreposição do _checkout_ usando JavaScript para passar múltiplos atributos e ainda maior personalização. Você também pode criar fluxos de trabalhos melhorados usando um _checkout_ embutido.

<ReadMore>Leia mais sobre [utilizar Paddle.js para construir um checkout embutido](https://developer.paddle.com/build/checkout/build-branded-inline-checkout).</ReadMore>


## Soluções completas de comércio eletrônico

Para mais personalização sobre o carrinho de compras e o processo de checkout do seu site, você pode conectar um provedor de serviços financeiros mais completo (como [Snipcart](#snipcart)) em seu projeto Astro. Essas plataformas de e-commerce também podem integrar-se com outros serviços de terceiros para gerenciamento de contas de usuário, personalização, inventário e análises.

### Snipcart

[Snipcart](https://snipcart.com/) é uma plataforma de carrinho de compras poderosa voltada para desenvolvedores, baseada em HTML/JavaScript.

O Snipcart permite a integração com serviços de terceiros, como provedores de envio, habilitação de webhooks para integração avançada entre seu carrinho e outros sistemas, escolha entre várias plataformas de pagamento (como Stripe, Paypal e Square), personalização de modelos de e-mail, além de fornecer ambientes de teste ao vivo.

:::tip
Quer uma solução Snipcart pré-construída? Confira [`astro-snipcart`](https://astro-snipcart.vercel.app/), um modelo da comunidade Astro totalmente funcional, incluindo um sistema de design opcional, pronto para integração com sua conta Snipcart.
:::

#### Uso Básico

A seguir está um exemplo de configuração de um _checkout_ com Snipcart e a adição de elementos de botão para "Adicionar ao carrinho" e "Finalizar compra" em uma página Astro. Isso permitirá que os visitantes adicionem produtos ao carrinho sem serem direcionados imediatamente para a página de _checkout_.

<ReadMore>Para instruções completas, incluindo a configuração da sua loja Snipcart, veja [a documentação de instalação Snipcart](https://docs.snipcart.com/v3/setup/installation).</ReadMore>

<Steps>
1. Adicione o script [conforme mostrado nas instruções de instalação Snipcart](https://docs.snipcart.com/v3/setup/installation) em sua página, após o elemento `<body>`.

    ```html title="src/pages/my-product-page.astro"
    <body></body>
    <script>
      window.SnipcartSettings = {
        publicApiKey: "SUA_CHAVE_API",
        loadStrategy: "on-user-interaction",
      };

      (function()...); // disponível na documentação Snipcart
    </script>
    ```

2. Personalize `window.SnipcartSettings` com qualquer uma das [configurações Snipcart disponíveis](https://docs.snipcart.com/v3/setup/installation#settings) para controlar o comportamento e a aparência do seu carrinho.

    ```html title="src/pages/my-product-page.astro"
    <script>
      window.SnipcartSettings = {
        publicApiKey: "SUA_CHAVE_API",
        loadStrategy: "manual",
        version: "3.7.1",
        addProductBehavior: "none",
        modalStyle: "side",
      };

      (function()...); // disponível na documentação Snipcart
    </script>
    ```

3. Adicione `class="snipcart-add-item"` a qualquer elemento HTML, como um `<button>`, para adicionar um item ao carrinho ao clicar nele. Inclua também outros elementos de dados para [atributos de produto comuns do Snipcart](https://docs.snipcart.com/v3/setup/products), como preço e descrição, e quaisquer campos opcionais.

    ```html title="src/pages/my-product-page.astro"
    <button
      class="snipcart-add-item"
      data-item-id="astro-print"
      data-item-price="39.99"
      data-item-description="Uma impressão emoldurada do logotipo Astro."
      data-item-image="/assets/images/astro-print.jpg"
      data-item-name="Astro Print"
      data-item-custom1-name="Cor da moldura"
      data-item-custom1-options="Marrom|Prata[+10.00]|Ouro[+20.00]"
      data-item-custom2-name="Instruções de entrega"
      data-item-custom2-type="textarea"
    >
      Adicionar ao carrinho
    </button>
    ```

4. Adicione um botão de checkout Snipcart com a classe `snipcart-checkout` para abrir o carrinho e permitir que os clientes concluam a compra em um modal de _checkout_.

    ```html title="src/pages/my-product-page.astro"
    <button class="snipcart-checkout">Clique aqui para finalizar a compra</button>
    ```
</Steps>

#### SDK JavaScript Snipcart

O [SDK JavaScript Snipcart](https://docs.snipcart.com/v3/sdk/basics) permite configurar, personalizar e gerenciar seu carrinho Snipcart de forma programática.

Isso permite realizar ações como:

- Obter informações relevantes sobre a sessão Snipcart atual e aplicar determinadas operações ao carrinho.
- Escutar eventos e acionar _callbacks_ dinamicamente.
- Escutar mudanças de estado e receber um instantâneo completo do estado do carrinho.

<ReadMore>Consulte a [documentação Snipcart](https://docs.snipcart.com/v3/) para mais informações sobre todas as opções de integração com Snipcart em seu Projeto Astro.</ReadMore>

#### `astro-snipcart`

Existem dois pacotes `astro-snipcart` da comunidade que podem simplificar o uso de Snipcart.

- [ Modelo Astro `@lloydjatkinson/astro-snipcart`](https://astro-snipcart.vercel.app/): Este modelo Astro inclui um sistema de design opcional para uma solução completa de e-commerce. Saiba mais em seu próprio e amplo site de documentação, incluindo [a motivação por trás da criação de `astro-snipcart`](https://astro-snipcart.vercel.app/motivation), como uma forma conveniente e nativa de Astro interagir com a API Snipcart.

- [Integração `@Adammatthiesen/astro-snipcart`](https://github.com/Adammatthiesen/astro-snipcart): Esta integração foi fortemente inspirada no tema `astro-snipcart` e fornece componentes Astro (ou Vue) que podem ser adicionados ao seu projeto Astro para criar produtos, controlar o carrinho e muito mais. Veja o [tutorial completo](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon) para mais informações.

## Recursos da Comunidade

- [Experiência prática: Loja eCommerce com Astro?](https://crystallize.com/blog/building-ecommerce-with-astro)
- [Coletando Pagamentos com Stripe usando Astro](https://zellwk.com/blog/stripe-astro-recipe/)
